document.write("<script language=javascript src='/static/im_cvter.js'><\/script>");
document.write("<script language=javascript src='/static/cor_post_wrapper.js'><\/script>");
document.write("<script language=javascript src='/static/highcam_post_wrapper.js'><\/script>");
document.write("<script language=javascript src='/static/base64_im.js'><\/script>");

function POST_IM_CVT(content, url, ptr_im_cvt) {
    $.ajax({
        type: "POST",
        url: url,
        dataType: "json",
        data: content,
        success: function (data) {
            console.log('post success');
            console.log(data);
            if (data['status'] == 'success') {
                ptr_im_cvt.trigger_cvt();
            }
        },
        error: function (e) {
            console.log("post error:");
            console.log(e)
        }
    });
}

function get_select_btn_value(btn) {
    for (i = 0; i < btn.length; i++) {
        if (btn[i].selected == true) {
            return btn[i].value;
        }
    }
}

window.onload = function () {

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = 'red';
    var width = canvas.getAttribute("width");
    var height = canvas.getAttribute("height");

    g_cor_post_wrapper = new CorPostWrapper(width, height);
    g_image_cvt = new ImageCvter();
    g_highcam_post_wrapper = new HighCamPostWrapper();
    g_base64_im = new Base64Img();
    g_trace_json_str = '';

    var im = new Image();
    im.src = document.location.origin + '/static/template_park.jpeg';


    im.onload = function () {
        ctx.drawImage(im, 0, 0, g_cor_post_wrapper.width, g_cor_post_wrapper.height);
    };


    var btn_trigger_cvt_pics = document.getElementById("trigger_cvt_pics");
    btn_trigger_cvt_pics.onclick = function () {
        console.log('trigger_cvt_pics clicked');
        var path = document.getElementById("dir_for_convert").value;
        var payload = {'cvt_im_path': path};
        POST_IM_CVT(payload, "/process_start", g_image_cvt);
    };

    var btn_trace_json_select = document.getElementById("select_json");
    btn_trace_json_select.onchange = function () {

        console.log("btn_trace_json_select on change");
        file = btn_trace_json_select.files[0];
        console.log(file);

        var reader = new FileReader();
        //将文件以文本形式读入页面
        reader.readAsText(file);
        reader.onload = function (ev) {
            console.log("on load of file");
            console.log(ev);
            g_trace_json_str = this.result;
        }
    };


    var btn_trace_type_select = document.getElementById("btn_trace_type_select");
    g_cor_post_wrapper.trace_type = get_select_btn_value(btn_trace_type_select);
    btn_trace_type_select.onchange = function () {
        g_cor_post_wrapper.trace_type = get_select_btn_value(btn_trace_type_select);
        console.log(g_cor_post_wrapper.trace_type);
    };
    console.log(g_cor_post_wrapper.trace_type);


    var btn_select_image_files = document.getElementById("select_trace_files");
    btn_select_image_files.onchange = function () {
        console.log("btn_trace_json_select on change");
        g_cor_post_wrapper.selected_images_files = btn_select_image_files.files;
        if (g_cor_post_wrapper.trace_type == "trace_in") {
            var reader = new FileReader();
            reader.readAsDataURL(
                g_cor_post_wrapper.selected_images_files[g_cor_post_wrapper.selected_images_files.length - 1]);
            reader.onload = function (e) {
                console.log('read url done');
                console.log(this.result);
                g_base64_im.canvas_draw_base64_with_header("canvas",this.result,
                    0, 0, g_cor_post_wrapper.width, g_cor_post_wrapper.height)
            }
        } else {
            var reader = new FileReader();
            reader.readAsDataURL(
                g_cor_post_wrapper.selected_images_files[0]);
            reader.onload = function (e) {
                console.log('read url done');
                console.log(this.result);
                g_base64_im.canvas_draw_base64_with_header("canvas",this.result,
                    0, 0, g_cor_post_wrapper.width, g_cor_post_wrapper.height)
            }
        }
    };


    var btn_trigger_trace_from_json_file = document.getElementById("btn_trigger_trace_from_jsonfile");
    btn_trigger_trace_from_json_file.onclick = function () {
        g_highcam_post_wrapper.do_post({'payload': g_trace_json_str});
    };


    var btn_trigger_trace_from_imagefiles = document.getElementById("btn_trigger_trace_from_imagefiles");
    btn_trigger_trace_from_imagefiles.onclick = function () {
        g_cor_post_wrapper.objURL = document.getElementById("trace_append_path").value;
        console.log(g_cor_post_wrapper.objURL);
        g_cor_post_wrapper.do_post();
    };


    draw();
    var pts = new Array();

    function draw() {
        // TODO : load im in event
        canvas.onmouseup = function (ev) {
            var ev = ev || event;
            pts.push(ev.clientX + document.documentElement.scrollLeft - canvas.offsetLeft);
            pts.push(ev.clientY + document.documentElement.scrollTop - canvas.offsetTop);
            // if (pts.length > 3) {
            //     ctx.beginPath();
            //     ctx.moveTo(pts[pts.length - 4], pts[pts.length - 3]);
            //     ctx.lineTo(pts[pts.length - 2], pts[pts.length - 1]);
            //     if (pts.length > 7) {
            //         ctx.moveTo(pts[0], pts[1]);
            //         ctx.lineTo(pts[pts.length - 2], pts[pts.length - 1]);
            //         pts = new Array();
            //     }
            //     ctx.stroke();
            //     ctx.closePath();
            // }
            if (pts.length > 3) {
                var x1 = pts[0];
                var x2 = pts[2];
                var y1 = pts[1];
                var y2 = pts[3];
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y1);
                ctx.stroke();
                ctx.moveTo(x2, y1);
                ctx.lineTo(x2, y2);
                ctx.stroke();
                ctx.moveTo(x2, y2);
                ctx.lineTo(x1, y2);
                ctx.stroke();
                ctx.moveTo(x1, y2);
                ctx.lineTo(x1, y1);

                ctx.stroke();
                ctx.closePath();

                g_cor_post_wrapper.set_xy(x1, x2, y1, y2);
                // g_cor_post_wrapper.do_post();
                pts = new Array();
            }
        }
    }
};
